<template>
  <div class="Setting" id="index">
    <Header left="arrow" title="系统设置"></Header>
    <div class="body">
      <div
        class="card_view"
        v-for="(value, key, index) in setting_list"
        :key="index"
      >
        <van-cell
          v-if="value.num_boolean"
          :title="value.setting_name"
          is-link
          :to="value.path"
          :value="value.num"
          @click="clear(key)"
        />
        <van-cell v-else :title="value.setting_name" is-link :to="value.path" />
      </div>
    </div>
    <div class="button" @click="logout">
      <van-button round type="danger" size="large">退出登录</van-button>
    </div>
  </div>
</template>

<script>
import Header from "../../components/Header";
import Vue from "vue";
import { NavBar, Icon, Cell, Button, Toast } from "vant";

Vue.use(NavBar).use(Icon).use(Cell).use(Button);

export default {
  components: {
    Header,
  },
  data() {
    return {
      setting_list: [
        {
          setting_name: "清理缓存",
          num: "321MB",
          num_boolean: true,
          path: "",
        },
        {
          setting_name: "账号与安全",
          num: "",
          num_boolean: false,
          path: "",
        },
      ],
    };
  },
  methods: {
    onClickLeft() {
      if (window.history.length <= 1) {
        this.$router.push({ path: "/my" });
        return false;
      } else {
        this.$router.go(-1);
      }
    },
    clear(key) {
      Toast("清理完成");
      // eslint-disable-next-line
      android.clearWebViewCache();
      this.setting_list[key].num = "0MB";
    },
    logout() {
      // eslint-disable-next-line
      // android.logout()
      this.$store.dispatch("setUserInfo",null)
      this.$router.push({ path: "/me" });
    },
  },
};
</script>

<style scoped>
#app > div {
  background-color: rgba(255, 255, 255, 1);
}
#index {
  padding-top: 2.13rem;
  height: 100%;
}
.header {
  position: fixed;
  height: 2.13rem;
  line-height: 1.457rem;
  left: 0px;
  top: 0px;
  right: 0px;
}
.header_title {
  height: 2.13rem;
  line-height: 2.803rem;
}
.van-nav-bar {
  box-shadow: none;
  border-bottom: none;
}
.left_icon {
  font-size: 25px;
}
.body {
  width: 100%;
  background-color: #ffffff;
}
.van-cell {
  padding: 18px 15px;
}
.van-cell__title {
  height: 22px;
  font-size: 16px;
  font-weight: 400;
  line-height: 22px;
  color: rgba(51, 51, 51, 1);
}
.van-cell__value {
  font-size: 12px;
  font-weight: 400;
  color: rgba(52, 52, 52, 1);
  opacity: 0.65;
  padding-right: 4px;
}
.card_view {
  width: 100%;
  position: relative;
}
.card_view::after {
  position: absolute;
  box-sizing: border-box;
  content: " ";
  pointer-events: none;
  right: 0;
  bottom: 0;
  left: 15.5px;
  border-bottom: 0.5px solid #333333d8;
  -webkit-transform: scaleY(0.5);
  -ms-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
/* .card_view:first-child::before{
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    right: 0;
    top: 0;
    left: 15.5px;
    z-index: 99;
    border-bottom: 0.5px solid #333333D8;
    -webkit-transform: scaleY(.5);
    -ms-transform: scaleY(.5);
    transform: scaleY(.5);
} */

.button {
  position: fixed;
  bottom: 25px;
  right: 15px;
  left: 15px;
  z-index: 99;
}
.van-button--danger {
  background-color: #cf1f43ff;
  border: 0.02667rem solid #cf1f43ff;
}
.van-button {
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
}
</style>
